<template>
	<view class="main-body">
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item>
				<image src="/static/banner/banner01.jpg" mode="scaleToFill" class="swiper-image"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/banner/banner02.jpg" mode="scaleToFill" class="swiper-image"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/banner/banner03.jpg" mode="scaleToFill" class="swiper-image"></image>
			</swiper-item>
		</swiper>
		<view class="head-box">
			<view class="box-item">
				<image class="box-item-img" src="/static/nav/nav01.png" @click="jumpPage(0)"></image>
				<text>患者</text>
			</view>
			<view class="box-item">
				<image class="box-item-img" src="/static/nav/nav02.png" @click="jumpPage(1)"></image>
				<text>回访</text>
			</view>
			<view class="box-item">
				<image class="box-item-img" src="/static/nav/nav03.png" @click="jumpPage(2)"></image>
				<text>业绩</text>
			</view>
		</view>
		<view class="boby-box">
			<view class="uni-flex boby-title">
				<view class="uni-flex-item">快速通道</view><view>---</view>
			</view>
			<view class="boby-content">
				<view class="content-item">
					<image class="content-item-img" src="/static/passageway/passageway01.png"></image>
				</view>
				<view class="content-item">
					<image class="content-item-img" src="/static/passageway/passageway02.png"></image>
				</view>
				<view class="content-item">
					<image class="content-item-img" src="/static/passageway/passageway03.png"></image>
				</view>
				<view class="content-item">
					<image class="content-item-img" src="/static/passageway/passageway04.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		},
		onLoad() {
			
		},
		onTabItemTap(e){
			
		},
		methods: {
			onNavigationBarButtonTap(val) {
                if (val.index == 0) {
                    uni.navigateTo({
						url: `/pages/index/patient/patient-add`,
					})
                }
			},
			// onTabItemTap(obj){
			// 	uni.reLaunch({
			// 	    url: `/pages/index/returnVisit/returnVisit-addTo`
			// 	});
			// },
			jumpPage(num){
				if(num == 0){
					uni.navigateTo({
						url: `/pages/index/patient/patient`,
					})	
				}else if(num == 1){
					uni.navigateTo({
						url: `/pages/index/returnVisit/returnVisit-list`,
					})	
				}else{
					
				}
			}
		}
	}
</script>

<style lang="scss">
	.main-body{
		padding: 20rpx 2.5%;
	}
	
	.swiper {
		height: 300rpx;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 0 0 5rpx #CCCCCC;
		
		.swiper-item {
			display: block;
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
		}
		
		.swiper-image{
		     width:100%;  
		     height:300upx; 
		 }
	}
	
	.head-box {
		width: 100%;
		display: flex;
		justify-content: space-around;
		background-color: white;
		margin: 30rpx 0;
		padding: 30rpx 0;
		border-radius: 10rpx;
		box-shadow: 0 0 5rpx #CCCCCC;
		
		.box-item {
			flex: 0 0 33.3%;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.box-item-img {
				width: 60px;
				height: 60px;
				margin-bottom: 10upx;
				border-radius: 50%;
			}
			
			text {
				font-size: 30upx;
				color: #8ABAFF;
			}
		}
	}
	
	.boby-box{
		width: 100%;
		background-color: white;
		border-radius: 10rpx;
		box-shadow: 0 0 5rpx #CCCCCC;
		padding: 20rpx 20rpx 40rpx;
		color: rgb(136,187,253);
	}
	
	.boby-title{
		padding: 10rpx 1.5%;
		
		.uni-flex-item{
			border-left: 2px solid #8ABAFF;
			font-size: 30rpx;
			font-weight: bold;
			padding-left: 20rpx;
		}
	}
	
	.boby-content{
		display: flex;
		flex-flow: wrap;
		
		.content-item{
			width: 47%;
			height: 160rpx;
			margin: 1.5%;
		}
		
		.content-item-img{
			width: 100%;
			height: 100%;
		}
	}
</style>
